<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="pixi.js"></script>
		<style>
			.ichart{width:600px;height:300px;box-sizing: border-box;overflow: hidden;}
			.ichart-left{flex-direction: column;justify-content: space-between;display: flex;float:left;align-items:flex-end;position: relative;z-index: 2;}
			.ichart-left::before{content:attr(unit);position: absolute;top:-20px;right:0;font-size:10.5px;}
			.ichart-left-item{position: relative;width:5px;height:1px;background-color: #333;left:5px;margin-left:50px;}
			.ichart-left-item::before{content: attr(data);font-size:9px;position: absolute;top:-4px;right:10px;word-break: keep-all;white-space: nowrap;}
			
			.ichart-right{display: flex;flex-direction:column;float:left;}
			.ichart-canvas{border:solid 1px #333;border-top:none;border-right: none;flex:1 1 auto;}
			.ichart-right-top{flex:1 1 auto;display: flex;overflow: hidden;position: relative;background:#fff;z-index: 1;}
			.ichart-right-top-point{position:absolute;width:0px;border-left:1px dashed #666; height:100%;display: none;}
			.ichart-right-tip{background:#ffffff;border-radius: 5px;box-shadow: 0 0 5px 0 #00000055;font-size: 12px;position:absolute;padding:5px 10px;left:10px;top:5px}
			.ichart-right-tip-line{white-space: nowrap;word-break:keep-all;display:flex;align-items: center;}
			.ichart-right-tip-color{display: inline-block;width:5px;height:5px;border-radius: 5px;margin-right: 5px;}

			.ichart-right-bottom{flex:0 0 auto;position:relative;z-index: 2;}
			.ichart-right-bottom::after{content: attr(unit);font-size:10.5px;position:absolute;width:100%;left:0;bottom:0;text-align: center;}
			.ichart-bottom-item{position:absolute;width:1px;height:5px;background-color: #333;top:-5px;}
			.ichart-bottom-item::before{content: attr(data);font-size:9px;position:absolute;top:10px;width:60px;left:-30px;text-align: center;}
			.ichart-bottom-item:first-child::before{left:0;width:auto;text-align: left;}
			.ichart-bottom-item:last-child{margin-left: -1px;}
			.ichart-bottom-item:last-child::before{left:auto;width:auto;text-align: left;right:0;}
		</style>
	</head>
	<body>
	</body>
</html>
<script type="module">
	import {ichart} from "./ichart.js"
	//定义多段线的点集合
	const points = {x:[],y:[[],[]]};
	let length=1000000;
	for(let i=0;i<length;i++){
		points.y[0].push(Math.sin(i*5%360*Math.PI/180)*100+100);		
		let peek=1/(Math.abs(length/2-i)+1);
		points.y[1].push(100*peek+150);
		points.x.push(i);
	}
	let obj=ichart(document.body,{width:1000,height:200,unitY:"单位(Pa)",showTip:true});
	obj.setData(points);
</script>